/**
 * Created by chencheng on 17-8-31.
 */

import { Component } from 'react';

import { MainHeader, MainContent } from 'templates/MainLayout/MainLayout';
import { EnumModalType } from 'constants/EnumType';
import {
    Table, Button, Input, Icon, Modal, Form,
} from 'antd';

import T from 'utils/T';
// import Bar from 'templates/ToolComponents/D3Charts/Bar';
import './index.scss';

export default class ImgCarousel extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        let imgCarouselBox = this.imgCarouselBox;
        this.imgCarousel();
    }

    imgCarousel = () => {

        let data = ['穿衣指南', '沙发上的', '爱的方式', '对方是否'];
        // 追加操作，无缝轮播
        data = data.concat(data[0]);

        let $imgBox = $(this.imgCarouselBox).find('.innerBox');
        data.forEach(function (item) {
            $imgBox.append('<div class="fontShadow item"><div class="imgMain">' + item + '</div><div class="imgSub">' + item + '</div></div>');
        });

        let items = $imgBox.find('.item'); // 轮播循环体
        let height = items.first().height();
        let itemsLen = data.length;
        console.log(items, height);

        let interval = 2000; // interval 自动轮播间隔时间
        let autoPlay = false; // autoPlay 是否开启自动轮播
        // let liWdith = $(imgCarouselBox)..height(); // autoPlay 是否开启自动轮播
        let run = null;
        let i = 0;

        autoPlay && auto();
        function auto() {
            run = setInterval(function () {
                i++;
                if (i === itemsLen) {
                    $imgBox.css({ marginTop: 0 });
                    i = 1
                }
                move();
            }, interval);
        }
        function move() {
            $imgBox.stop().animate({
                marginTop: -height * i
            }, 500, 'swing');
        }
        $imgBox.hover(function () {
            autoPlay && clearInterval(run);
        }, function () {
            autoPlay && auto();
        });

    };

    render() {

        return (<div className="imgCarouselBox" ref={imgCarouselBox => (this.imgCarouselBox = imgCarouselBox)}>
            <div className="innerBox">

            </div>
        </div>);
    }
}

